<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ALS Environment Data</title>
    <link rel="stylesheet" href="{{ url_for('static', filename = 'css/time-to.css', _external = True) }}"/>
    <style>
        body {
            font-family: "BMW Type Global";
        }

        body, div, svg {
            margin: 0;
            padding: 0;
        }

        .progress-strip {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: #fff;
        }

        .progress-strip .bar {
            width: 0%;
            height: 3px;
            opacity: .7;
            background-color: #0070c0;
        }

        .linear-increase {
            transition-property: width;
            transition-duration: 1s;
            transition-timing-function: linear;
            -webkit-transition-property: width;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: linear;
        }

        .never-clock {
            position: fixed;
            right: 10px;
            top: 4px;
            color: #fff;
        }
    </style>
</head>
<body>

<div id="stage"></div>
<div id="neverClock" class="never-clock"></div>
<div id="progressStrip" class="progress-strip">
    <div class="bar"></div>
</div>

<script src="{{ url_for('static', filename = 'js/libs/jquery-1.9.1.min.js', _external = True) }}"></script>
<script src="{{ url_for('static', filename = 'js/libs/raphael.min.js', _external = True) }}"></script>
<script src="{{ url_for('static', filename = 'js/libs/jquery.time-to.min.js', _external = True) }}"></script>
<script>
    var pImg = '{{ url_for('static', filename = 'images/casting_overview.jpg', _external = True) }}?time=20161226';
    (function () {
        var paper,
            midObj = {},
            winHt = $(window).height() - 6,
            winWt = $(window).width(),
            tablePaddingRight = 20,
            gridCacheDict = {},
            progressTimeHandle,
            timeHandle,
            loopTimeSpan = 15000;
        var legDict = {
            'production end': {color: '#000'},
            'cleaning scheduled': {color: '#ddd9c4', text: ['cleaning', 'scheduled']},
            'maintanance scheduled': {color: '#a6a6a6', text: ['maintanance', 'scheduled']},
            'sample production': {color: '#006600', text: ['sample', 'production']},
            'testproduction': {color: '#009900'},
            'setting': {color: '#8db4e2'},
            'entrance empty': {color: '#e6b8b7'},
            'outlet occupied': {color: '#60497a'},
            'manpower shortage': {color: '#963634', text: ['manpower', 'shortage']},
            'metal deficiency': {color: '#632523'},
            'error production': {color: '#a50021'},
            'error maintenance': {color: '#cc0066', text: ['error', 'maintenance']},
            'error tool shop': {color: '#ff3300'},
            'error dosing furnace': {color: '#9900cc', text: ['error dosing', 'furnace']},
            'core shortage': {color: '#cc99ff'},
            'conveyor': {color: '#ffff00'},
            'furnace filling / change': {color: '#0000ff', text: ['furnace filling', '/ change']},
            'production': {color: '#00ff00'},
            'system failure': {color: '#ff0000'}
        };
        var gridRowNum = 2,
            gridColNum = 2,
            grid_data_arr = [{
                'name': 'B38A'
            }, {
                'name': 'B38B'
            }, {
                'name': 'B48A'
            }, {
                'name': 'B48B'
            }];
        var graphInfoList = [
            [{
                x: 100,
                y: 30,
                width: 60,
                height: 60
            }, {
                x: 100,
                y: 45,
                width: 60,
                text: '- ℃',
                attr: {
                    'text-anchor': 'middle'
                }
            }],
            [{
                x: 500,
                y: 30,
                width: 60,
                height: 60
            }, {
                x: 500,
                y: 45,
                width: 60,
                text: '- ℃',
                attr: {
                    'text-anchor': 'middle'
                }
            }],
            [{
                x: 900,
                y: 30,
                width: 60,
                height: 60
            }, {
                x: 900,
                y: 45,
                width: 60,
                text: '- ℃',
                attr: {
                    'text-anchor': 'middle'
                }
            }]
        ];
        var envDict = {
            'LP11': {
                graphData: [{
                    x: 240,
                    y: 438,
                    width: 75,
                    height: 60
                }, {
                    x: 240,
                    y: 453,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 240,
                    y: 485,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP12': {
                graphData: [{
                    x: 240,
                    y: 560,
                     width: 75,
                    height: 60
                }, {
                    x: 240,
                    y: 575,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 240,
                    y: 607,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP13': {
                graphData: [{
                    x: 240,
                    y: 699,
                     width: 75,
                    height: 60
                }, {
                    x: 240,
                    y: 714,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 240,
                    y: 746,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP14': {
                graphData: [{
                    x: 240,
                    y: 820,
                     width: 75,
                    height: 60
                }, {
                    x: 240,
                    y: 835,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 240,
                    y: 867,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP15': {
                graphData: [{
                    x: 240,
                    y: 958,
                     width: 75,
                    height: 60
                }, {
                    x: 240,
                    y: 973,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 240,
                    y: 1005,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP16': {
                graphData: [{
                    x: 240,
                    y: 1080,
                     width: 75,
                    height: 60
                }, {
                    x: 240,
                    y: 1095,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 240,
                    y: 1127,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP21': {
                graphData: [{
                    x: 700,
                    y: 438,
                     width: 75,
                    height: 60
                }, {
                    x: 700,
                    y: 453,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 700,
                    y: 485,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP22': {
                graphData: [{
                    x: 700,
                    y: 560,
                     width: 75,
                    height: 60
                }, {
                    x: 700,
                    y: 575,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 700,
                    y: 607,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP23': {
                graphData: [{
                    x: 700,
                    y: 699,
                     width: 75,
                    height: 60
                }, {
                    x: 700,
                    y: 714,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 700,
                    y: 746,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP24': {
                graphData: [{
                    x: 700,
                    y: 820,
                     width: 75,
                    height: 60
                }, {
                    x: 700,
                    y: 835,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 700,
                    y: 867,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP25': {
                graphData: [{
                    x: 700,
                    y: 958,
                     width: 75,
                    height: 60
                }, {
                    x: 700,
                    y: 973,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 700,
                    y: 1005,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP26': {
                graphData: [{
                    x: 700,
                    y: 1080,
                     width: 75,
                    height: 60
                }, {
                    x: 700,
                    y: 1095,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 700,
                    y: 1127,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP31': {
                graphData: [{
                    x: 1157,
                    y: 438,
                     width: 75,
                    height: 60
                }, {
                    x: 1157,
                    y: 453,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1157,
                    y: 485,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP32': {
                graphData: [{
                    x: 1157,
                    y: 560,
                     width: 75,
                    height: 60
                }, {
                    x: 1157,
                    y: 575,
                     width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1157,
                    y: 607,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LP33': {
                graphData: [{
                    x: 1157,
                    y: 699,
                     width: 75,
                    height: 60
                }, {
                    x: 1157,
                    y: 714,
                    width: 75,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1157,
                    y: 746,
                     width: 75,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            }
        };

        var redrawGridDynamicContent = function () {
            $.each(gridCacheDict, function (k, v) {
                var tmpObj = grid_data_arr[k];
                tmpObj['CastingCurrent'] = tmpObj['CastingCurrent'] || 0;
                tmpObj['EndcontrolCurrent'] = tmpObj['EndcontrolCurrent'] || 0;
                tmpObj['CastingForecast'] = tmpObj['CastingForecast'] || 0;
                tmpObj['EndcontrolForecast'] = tmpObj['EndcontrolForecast'] || 0;
                tmpObj['CastingTarget'] = tmpObj['CastingTarget'] || 0;
                tmpObj['EndcontrolTarget'] = tmpObj['EndcontrolTarget'] || 0;
                if (tmpObj['CastingCurrent'] < tmpObj['CastingPlanned']) {
                    v['CastingCurrent']['attr']['fill'] = '#f00'
                }
                else {
                    v['CastingCurrent']['attr']['fill'] = '#0f0'
                }
                if (tmpObj['EndcontrolCurrent'] < tmpObj['EndcontrolPlanned']) {
                    v['EndcontrolCurrent']['attr']['fill'] = '#f00'
                }
                else {
                    v['EndcontrolCurrent']['attr']['fill'] = '#0f0'
                }
                if (tmpObj['CastingForecast'] < tmpObj['CastingTarget']) {
                    v['CastingForecast']['attr']['fill'] = '#f00'
                }
                else {
                    v['CastingForecast']['attr']['fill'] = '#0f0'
                }
                if (tmpObj['EndcontrolForecast'] < tmpObj['EndcontrolTarget']) {
                    v['EndcontrolForecast']['attr']['fill'] = '#f00'
                }
                else {
                     v['EndcontrolForecast']['attr']['fill'] = '#0f0'
                }
                $.each(v, function (i, o) {
                    o.text = tmpObj[i] || 0;
                    if (o.handle.attr('text') == '-' && o.text > 0) { // 初始数字增长动画
                        var cnt = 0;
                        var th = setInterval(function () {
                            o.handle.attr('text', cnt + '');
                            if (cnt >= o.text) {
                                o.handle.attr(o.attr);
                                clearInterval(th);
                            }
                            var step = 10;
                            if (o.text - cnt >= step) {
                                cnt = cnt + step;
                            }
                            else {
                                cnt = o.text;
                            }
                        }, 10);
                    }
                    else {
                        o.handle.attr('text', o.text).attr(o.attr);
                    }
                });
            });
        };

        // 一些不需要经常改变的图形
        var drawLazyGraph = function () {
            // 温度不需要显示
//            $.each(graphInfoList, function (k, v) {
//                drawInfoLayer(v);
//            });
            $.each(envDict, function (k, v) {
                if (v && v['graphData']) {
                    var arr = v['graphData'];
                    if (arr && arr.length == 3) {
                        arr[0]['color'] = v.color;
                        arr[0]['product'] = v.product;
                        arr[1]['text'] = v['total'] || 0;
                        arr[2]['text'] = v['damage'] || 0;
                        drawInfoLayer(arr);
                    }
                }
            });
        };

        var $progressStrip = $('#progressStrip'),
            progressStripWt = $progressStrip.width(),
            $pBar = $progressStrip.find('.bar'),
            incWt = parseInt((1000 / (loopTimeSpan - 1000)) * progressStripWt * 100) / 100; // 增长百分比

        var initEnvData = function () {
            clearInterval(progressTimeHandle);
            $pBar.removeClass('linear-increase').css('width', '0');
            progressTimeHandle = setInterval(function () {
                if ($pBar.hasClass('linear-increase') === false) {
                    $pBar.addClass('linear-increase')
                }
                var curProBarWt = parseInt($pBar.width()),
                    newProBarWt = incWt + curProBarWt + 'px';
                $pBar.css('width', newProBarWt);
            }, 1000);
            $.ajax({
                url: '/NEP/ALS/api/environment_data?timestamp=' + Date.now(),
                dataType: 'json',
                success: function (resp) {
                    if (resp) {
                        if (resp.data) {
                            var lpState = resp.lp_state;
                            var midSto = {};
                            $.each(resp.data, function (idx, o) {
                                var akz = o['akz'];
                                if (envDict[akz] != undefined) {
                                    if (midSto[akz] === undefined) {
                                        midSto[akz] = {}
                                    }
                                    var tmpObj = midSto[akz];
                                    if (tmpObj['total'] === undefined) {
                                        tmpObj['total'] = 0;
                                    }
                                    if (tmpObj['damage'] === undefined) {
                                        tmpObj['damage'] = 0;
                                    }
                                    tmpObj['total'] += parseInt(o['cnt']);
                                    if (o['statusid'] != 1) {
                                        tmpObj['damage'] = parseInt(o['cnt']);
                                    }
                                }
                            });
                            $.each(envDict, function (k, v) {
                                v['total'] = (midSto[k] && midSto[k]['total']) ? midSto[k]['total'] : 0;
                                v['damage'] = (midSto[k] && midSto[k]['damage']) ? midSto[k]['damage'] : 0;
                                if (lpState[k]) {
                                    var ste = lpState[k]['state'].toLocaleLowerCase();
                                    v['state'] = ste;
                                    v['product'] = lpState[k]['product'];
                                    if (legDict[ste]) {
                                        v['color'] = legDict[ste]['color'];
                                    }
                                }
                            });
                            drawLazyGraph();
                        }
                        {#                        if (resp.grid_data) {#}
                        {#                            var grid_data_dict = {};#}
                        {#                            $.each(resp.grid_data, function (k, v) {#}
                        {#                                grid_data_dict[v.name] = v;#}
                        {#                            });#}
                        {#                            $.each(grid_data_arr, function (k, v) {#}
                        {#                                $.extend(v, grid_data_dict[v.name])#}
                        {#                            });#}
                        {#                            redrawGridDynamicContent();#}
                        {#                        }#}
                        if (resp['api_data']) {
                            var grid_data_dict = {};
                            $.each(resp['api_data'], function (k, v) {
                                grid_data_dict[v.Type] = v;
                            });
                            $.each(grid_data_arr, function (k, v) {
                                $.extend(v, grid_data_dict[v.name])
                            });
                            redrawGridDynamicContent();
                        }
                    }
                }
            });
        };

        $(function () {
            showClock();
            initLayout();
        });

        var getImgSize = function (url, callFn) {
            $('<img/>').attr('src', url).load(function () {
                callFn.call(this);
            });
        };

        var initLayout = function () {
            paper = Raphael('stage', winWt, winHt);
            var titleBarHt = midObj.titleBarHt = 30;
            getImgSize(pImg, function () {
                var img = this;
                var imgWt = midObj.imgWt = img.width,
                    imgHt = midObj.imgHt = img.height;
                var scaleImgHt = midObj.scaleImgHt = winHt - titleBarHt,
                    imgWHScale = midObj.imgWHScale = imgWt / imgHt,
                    scaleImgWt = midObj.scaleImgWt = parseInt(scaleImgHt * imgWHScale);
                midObj.imgObj = paper.image(pImg, 0, titleBarHt, scaleImgWt, scaleImgHt);
                drawTitle();
                calcBoardSize();
                drawLegend();
            });
        };

        var calcBoardSize = function () {
            midObj.boardXAxis = midObj.scaleImgWt; // board 起始x坐标
            midObj.boardYAxis = midObj.titleBarHt; // board 起始y坐标

            midObj.boardWt = winWt - midObj.boardXAxis;
            midObj.boardHt = winHt - midObj.titleBarHt;

            midObj.boardGrid = [];
            midObj.boardGapWt = calcScaleSize(16);
            midObj.boardGapHt = calcScaleSize(16);
            midObj.boardGridItemWt = (midObj.boardWt - gridColNum * midObj.boardGapWt) / gridColNum;
            midObj.boardGridItemHt = (midObj.boardHt - (gridRowNum - 1) * midObj.boardGapHt) / gridRowNum;

            for (var i = 0; i < gridRowNum; i++) {
                for (var j = 0; j < gridColNum; j++) {
                    drawGrid(i, j);
                }
            }
        };

        var drawGrid = function (i, j) {
            var gridItem = {},
                gridItemRowNum = 6,
                gridItemColNum = 3;
            var idx = gridRowNum * i + j,
                dataHandle = grid_data_arr[idx];
            gridItem.x = midObj.boardXAxis + j * midObj.boardGridItemWt + midObj.boardGapWt * (j + 1);// *0.5，是为了给board加padding
            gridItem.y = midObj.boardYAxis + i * midObj.boardGridItemHt + midObj.boardGapHt * (i);
            paper.rect(gridItem.x, gridItem.y, midObj.boardGridItemWt, midObj.boardGridItemHt).attr('fill', '#000');
            var rowHt = midObj.boardGridItemHt / gridItemRowNum,
                colWt = midObj.boardGridItemWt / gridItemColNum,
                shortRowHt = rowHt * 0.75;
            var captionFontSize = calcScaleSize(rowHt - 8);

            paper.text(gridItem.x + midObj.boardGridItemWt * 0.5, gridItem.y + 0.5 * rowHt, 'Type ' + dataHandle['name']).attr({
                'text-anchor': 'middle',
                'font-size': captionFontSize,
                'font-weight': 900,
                'fill': '#0f0'
            });

            // 画表格线
            var tmpY = gridItem.y + rowHt,
                pathString = 'M' + gridItem.x + ' ' + tmpY + 'L' + (gridItem.x + midObj.boardGridItemWt) + ' ' + tmpY; // 第一横行
            paper.path(pathString).attr({
                stroke: '#00ff00',
                'stroke-width': 2
            });
            tmpY += shortRowHt;
            pathString = 'M' + (gridItem.x + colWt) + ' ' + tmpY + 'L' + (gridItem.x + midObj.boardGridItemWt) + ' ' + tmpY; // 第二横行
            paper.path(pathString).attr({
                stroke: '#00ff00',
                'stroke-width': 1
            });
            var tmpX = gridItem.x + colWt * 2;
            tmpY = gridItem.y + rowHt;
            pathString = 'M' + tmpX + ' ' + tmpY + 'L' + tmpX + ' ' + (tmpY + shortRowHt); // 第 1 竖线
            paper.path(pathString).attr({
                stroke: '#00ff00',
                'stroke-width': 1
            });
            rowHt = (midObj.boardGridItemHt - shortRowHt) / (gridItemRowNum - 1); // 重新计算行高
            tmpY = tmpY + shortRowHt;
            pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 2 竖线
            paper.path(pathString).attr({
                stroke: '#00ff00',
                'stroke-width': 1
            });
            tmpY = tmpY + rowHt;
            pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 3 竖线
            paper.path(pathString).attr({
                stroke: '#00ff00',
                'stroke-width': 1
            });
            tmpY = tmpY + rowHt;
            pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 4 竖线
            paper.path(pathString).attr({
                stroke: '#00ff00',
                'stroke-width': 1
            });
            tmpY = tmpY + rowHt;
            pathString = 'M' + tmpX + ' ' + (tmpY + calcScaleSize(2)) + 'L' + tmpX + ' ' + (tmpY + rowHt); // 第 5 竖线
            paper.path(pathString).attr({
                stroke: '#00ff00',
                'stroke-width': 1
            });

            var ftSize = captionFontSize * 0.7,
                shortRowPadding = calcScaleSize(8),
                prodValFtSize = captionFontSize;
            tmpY = gridItem.y + rowHt + 0.5 * shortRowHt;
            var th0 = paper.text(gridItem.x + colWt + shortRowPadding, tmpY, 'Casting').attr({
                'text-anchor': 'start',
                'font-size': ftSize,
                'font-weight': 700,
                'fill': '#0f0'
            });
            ftSize = captionFontSize * 0.7;
            tmpY = gridItem.y + rowHt + 0.5 * shortRowHt;
            var th1 = paper.text(gridItem.x + 2 * colWt + shortRowPadding, tmpY - calcScaleSize(shortRowHt * 0.45), 'Final').attr({
                'text-anchor': 'start',
                'font-size': ftSize,
                'font-weight': 700,
                'fill': '#0f0'
            });
            var th2 = paper.text(gridItem.x + 3 * colWt - shortRowPadding, tmpY + calcScaleSize(shortRowHt * 0.2), 'Inspection').attr({
                'text-anchor': 'end',
                'font-size': ftSize,
                'font-weight': 700,
                'fill': '#0f0'
            });
            var th2Box = th2.getBBox();

            if (th2Box['width'] >= Math.floor(colWt)) {
                var flexFtSz = colWt / 6;
                th0.attr({
                    'font-size': captionFontSize * 0.6,
                });
                th1.attr({
                    'font-size': flexFtSz,
                });
                th2.attr({
                    'font-size': flexFtSz,
                });
            }

            {#            var ftSize = captionFontSize * 0.65;#}
            var ftSize = colWt / 6;
            tmpY = gridItem.y + 1.5 * rowHt + shortRowHt;
            paper.text(gridItem.x + colWt, tmpY, 'Target:').attr({
                'text-anchor': 'end',
                'font-size': ftSize,
                'font-weight': 900,
                'fill': '#0f0'
            });

            var oTmp = gridCacheDict[idx] = {};
            oTmp['CastingTarget'] = {
                x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['CastingTarget']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingTarget']['attr']);
            oTmp['EndcontrolTarget'] = {
                x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['EndcontrolTarget']['handle'] = paper.text(gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolTarget']['attr']);
            tmpY = gridItem.y + 2.5 * rowHt + shortRowHt;
            {#            ftSize = captionFontSize * 0.65;#}
            ftSize = colWt / 6;
            paper.text(gridItem.x + colWt, tmpY, 'Current:').attr({
                'text-anchor': 'end',
                'font-size': ftSize,
                'font-weight': 900,
                'fill': '#0f0'
            });
            oTmp['CastingCurrent'] = {
                x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['CastingCurrent']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingCurrent']['attr']);
            oTmp['EndcontrolCurrent'] = {
                x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['EndcontrolCurrent']['handle'] = paper.text(gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolCurrent']['attr']);
            tmpY = gridItem.y + 3.5 * rowHt + shortRowHt;
            paper.text(gridItem.x + colWt, tmpY, 'Forecast:').attr({
                'text-anchor': 'end',
                'font-size': ftSize,
                'font-weight': 900,
                'fill': '#0f0'
            });

            {#            var textHandleInfo = textHandle.getBBox();#}
            {#            if(textHandleInfo && textHandleInfo['width']) {#}
            {#                textHandle.attr('font-size', captionFontSize * 0.6);#}
            {#            }#}

            oTmp['CastingForecast'] = {
                x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['CastingForecast']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingForecast']['attr']);
            oTmp['EndcontrolForecast'] = {
                x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['EndcontrolForecast']['handle'] = paper.text(gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolForecast']['attr']);
            tmpY = gridItem.y + 4.5 * rowHt + shortRowHt;
            paper.text(gridItem.x + colWt, tmpY, 'Planned:').attr({
                'text-anchor': 'end',
                'font-size': ftSize,
                'font-weight': 900,
                'fill': '#0f0'
            });
            oTmp['CastingPlanned'] = {
                x: gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['CastingPlanned']['handle'] = paper.text(gridItem.x + 2 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['CastingPlanned']['attr']);
            oTmp['EndcontrolPlanned'] = {
                x: gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight),
                y: tmpY,
                attr: {
                    'text-anchor': 'end',
                    'font-size': prodValFtSize,
                    'font-weight': 900,
                    'fill': '#0f0'
                }
            };
            oTmp['EndcontrolPlanned']['handle'] = paper.text(gridItem.x + 3 * colWt - calcScaleSize(tablePaddingRight), tmpY, '-').attr(oTmp['EndcontrolPlanned']['attr']);
        };

        var drawTitle = function () {
            var titBar = paper.rect(0, 0, winWt, midObj.titleBarHt);
            titBar.attr({
                'fill': '#0070c0',
                'stroke-width': 0
            });

            paper.text(12, 15, 'Foundry Casting Area').attr({
                'text-anchor': 'start',
                'font-size': 20,
                'font-weight': 900,
                'fill': '#fff'
            });

            var span1Wt = 440,
                span2Wt = 450,
                span3Wt = 340,
                titRectWt = 80,
                titRectHt = 24;
            var textY = midObj.titleBarHt + titRectHt * 0.5;
            midObj.imgZoomScale = midObj.scaleImgWt / midObj.imgWt;
            var text1X = calcScaleSize(span1Wt),
                text2X = calcScaleSize(span2Wt),
                text3X = calcScaleSize(span3Wt);

            paper.rect((text1X - titRectWt) * 0.5, midObj.titleBarHt, titRectWt, titRectHt).attr({
                fill: '#0070c0',
                stroke: '#0070c0'
            });

            paper.rect(text1X + (text2X - titRectWt) * 0.5, midObj.titleBarHt, titRectWt, titRectHt).attr({
                fill: '#0070c0',
                stroke: '#0070c0'
            });

            paper.rect(text1X + text2X + (text3X - titRectWt) * 0.5, midObj.titleBarHt, titRectWt, titRectHt).attr({
                fill: '#0070c0',
                stroke: '#0070c0'
            });

            paper.text(text1X * 0.5, textY, 'Line 1').attr({
                'text-anchor': 'middle',
                'font-size': 20,
                'font-weight': 900,
                'fill': '#fff'
            });

            paper.text(text1X + text2X * 0.5, textY, 'Line 2').attr({
                'text-anchor': 'middle',
                'font-size': 20,
                'font-weight': 900,
                'fill': '#fff'
            });

            paper.text(text1X + text2X + text3X * 0.5, textY, 'Line 3').attr({
                'text-anchor': 'middle',
                'font-size': 20,
                'font-weight': 900,
                'fill': '#fff'
            });

            initEnvData();
            timeHandle = setInterval(function () {
                initEnvData();
            }, loopTimeSpan);
        };

        var calcScaleSize = function (val) {
            var newVal = parseInt(val * midObj.imgZoomScale * 100) / 100;
            if (window.devicePixelRatio) {
                newVal = newVal * window.devicePixelRatio;
            }
            return newVal;
        };

        var clrRectWt,
            pdRectHt;
        // 画左侧LP11-LP33数据
        var drawInfoLayer = function (layerData) {
            if ($.isArray(layerData)) {
                $.each(layerData, function (idx, obj) {
                    drawInfoLayer(obj);
                });
            }
            else if ($.isPlainObject(layerData) && layerData.x != undefined && layerData.y != undefined) {
                if (layerData.lock === undefined) {
                    layerData.x = calcScaleSize(layerData.x);
                    layerData.y = calcScaleSize(layerData.y) + midObj.titleBarHt;
                    layerData.width = calcScaleSize(layerData.width);
                    layerData.height = calcScaleSize(layerData.height);
                }
                if (layerData.text != undefined) {
                    var opt = {
                        'text-anchor': 'start',
                        'font-size': 14,
                        'font-weight': 100,
                        'fill': '#fff'
                    };
                    if (layerData.lock === undefined) {
                        if (opt['text-anchor'] && layerData.width) {
                            layerData.x += 0.5 * layerData.width;
                        }
                    }
                    if (layerData.attr) {
                        $.extend(opt, layerData.attr);
                    }
                    if (layerData['handle']) {
                        layerData['handle'].attr('text', layerData.text);
                    }
                    else {
                        layerData['handle'] = paper.text(layerData.x, layerData.y, layerData.text).attr(opt);
                    }
                    layerData.lock = 1;
                }
                else if (layerData.width != undefined && layerData.height != undefined && layerData.lock === undefined) {
                    var opt = {
                        'fill': '#333'
                    };
                    if (layerData.attr) {
                        $.extend(opt, layerData.attr);
                    }

                    paper.rect(layerData.x, layerData.y, layerData.width, layerData.height).attr(opt);

                    clrRectWt = calcScaleSize(30);
                    pdRectHt = calcScaleSize(40);
                    layerData['color_handle'] = paper.rect(layerData.x - clrRectWt, layerData.y, clrRectWt, layerData.height).attr({
                        fill: layerData.color || '#fff'
                    });

                    paper.rect(layerData.x - clrRectWt, layerData.y - pdRectHt, (clrRectWt + layerData.width), pdRectHt).attr({
                        fill: '#fff'
                    });

                    layerData['product_handle'] = paper.text(layerData.x - clrRectWt + (clrRectWt + layerData.width) * 0.5, layerData.y - pdRectHt + pdRectHt * 0.5, '-').attr({
                        'text-anchor': 'middle',
                        fill: '#000',
                        'font-weight': 'bold'
                    });

                    var yAxis = layerData.y + layerData.height * 0.5;
                    var pathString = 'M' + (layerData.x) + ' ' + yAxis + 'L' + (layerData.x + layerData.width) + ' ' + yAxis;

                    paper.path(pathString).attr({
                        stroke: '#00ff00',
                        'stroke-width': 1
                    });
                    layerData.lock = 1;
                }
                if (layerData['color_handle'] && layerData.color) {
                    layerData['color_handle'].attr('fill', layerData.color);
                }
                if (layerData['product_handle'] && layerData.product) {
                    layerData['product_handle'].attr('text', layerData.product);
                }
            }
        };

        var drawLegend = function () {
            var rx = 801,
                ry = 792,
                wt = 30,
                ht = 30,
                itemWt = 451 * 0.5,
                itemHt = 487 / 10;
            wt = calcScaleSize(wt);
            ht = calcScaleSize(ht);
            var cnt = 0;
            $.each(legDict, function (k, v) {
                var rowNum = Math.floor(cnt / 2),
                    colNum = cnt % 2;
                var x = calcScaleSize(rx + colNum * itemWt + 8),
                    y = calcScaleSize(ry + rowNum * itemHt + 8) + midObj.titleBarHt;

                paper.rect(x, y, wt, ht).attr({
                    fill: v.color
                });

                x += wt + calcScaleSize(8);
                y += calcScaleSize(7);
                if (v.text) {
                    paper.text(x, y, v.text[0]).attr({
                        'text-anchor': 'start',
                        'font-size': '12',
                        'font-weight': '200'
                    });
                    paper.text(x, y + 12, v.text[1]).attr({
                        'text-anchor': 'start',
                        'font-size': '12',
                        'font-weight': '200'
                    });
                }
                else {
                    paper.text(x, y + 6, k).attr({
                        'text-anchor': 'start',
                        'font-size': '12',
                        'font-weight': '200'
                    });
                }
                cnt++;
            })
        };

        var showClock = function () {
            $('#neverClock').timeTo({
                fontSize: 18,
                theme: 'black'
            });
        }
    })();
</script>
</body>
</html>